<template>

  <el-carousel :interval="4000" type="card" indicator-position="none" arrow="always" height="300px" style="width: 1092px; margin: auto;">
    <el-carousel-item v-for="item in banner" :key="item">
      <!-- <h3 text="2xl" justify="center">{{ item }}</h3> -->
       <img :src="item" alt="" class="item-img">
    </el-carousel-item>
  </el-carousel>




</template>


<script setup>
import { ref, onMounted, onUnmounted, nextTick, watch } from 'vue'
const {banner} = defineProps({
      banner: {
          type: Array,
          default: () => [
      "https://admin.hqx.com.cn/Public/Uploads/Group/2021-11-26/61a038df800ff.png",
      "https://admin.hqx.com.cn/Public/Uploads/Group/2021-11-26/61a038df82418.png",
      "https://admin.hqx.com.cn/Public/Uploads/Group/2021-11-26/61a038df8349d.png",
      "https://admin.hqx.com.cn/Public/Uploads/Group/2021-11-26/61a038df8433d.png",
      ]
      }
  }) 




</script>

<style scoped>

.item-img{
  width: 100%;
  height: 100%;
}
</style>